<template>
  <Header src="src/assets/eggs.svg" nickname="chika"></Header>
  <Menu/>
  <div id="app" style="background-color: white;">
    <h1 class="titledjy">食堂投诉表单</h1>
    <el-form ref="complaintForm" :model="complaint" label-width="120px">
      <el-form-item label="姓名">
        <el-input v-model="complaint.name"></el-input>
      </el-form-item>
      <el-form-item label="食堂名称">
        <el-select v-model="complaint.restaurantId">
          <el-option v-for="name in rrrrr" :label="name.restaurantName" :value="name.restaurantId" :key="name.restaurantId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="complaint.email"></el-input>
      </el-form-item>
      <el-form-item label="投诉内容">
        <el-input type="textarea" v-model="complaint.content"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitComplaint">提交</el-button>
        <el-button type="primary" @click="resetForm">重置</el-button>
      </el-form-item>
      <span class="titledjy">我们会尽快解决您的问题!</span>
    </el-form>
  </div>
  <el-footer class="footer">
    <div class="container">
      <div class="content">

        <span>联系方式：1317181481@qq.com</span>
        <span>地址：上海理工大学军工路516号</span>
        <p>版权所有 © 2023 上海理工大学食堂点评交流社区系统</p>
      </div>
    </div>
  </el-footer>
</template>

<script setup>
import Header from '@/components/Head.vue';
import Menu from '@/components/Menu.vue';
import {ElForm, ElFormItem, ElInput, ElButton, ElMessage} from 'element-plus';
import {generalValidatorJudgeIfEmpty} from '@/utils/common.js';
import {complaintRestaurant} from "@/web-api/complaint_user/complaint-user.js";
import {communityReceive} from "@/web-api/community_user/community.js";
// import restaurants from "@/view/main/Restaurants.vue";
// import {DefaultAllowlist as response} from "bootstrap/js/src/util/sanitizer.js";
import {complaintUser} from "../../web-api/complaint_user/complaint-user.js";


let complaint = ref({
  name: '',
  email: '',
  restaurantId:'',
  content: '',
  // restaurantName:''
})
// restaurantName:''
let rrrrr = ref([])
const getRestaurant=()=>{
  complaintRestaurant({
  }).then(response=>{
    console.log(response)
    if (response.code === 200) {
      ElMessage.success('获取列成功');
      rrrrr.value= response.data;
      console.log(rrrrr.value)
      //   this.total = response.total;
    } else {
      ElMessage.error(response.message);
    }
  })
      .catch(error => {
        ElMessage.error('获取列表失败');
        console.log(error);
      });
};

const resetForm = () => {

  complaint.value.name = '';
  complaint.value.email = '';
  complaint.value.content = '';
}
const submitComplaint = () => {
  complaintUser(complaint).then(response => {
    if (response.code === 200) {
      ElMessage.success("投诉成功!");
    } else {
      ElMessage.error("系统错误！");
      console.log();
    }
  })
}
onBeforeMount(()=>{
  getRestaurant();
})
</script>

<style scoped>
.titledjy{
  background: #3da8f5;
  text-align: center;
}

.footer {
  background-color: #3da8f5;
  text-align: center;
  padding: 10px;
  position: absolute;
  bottom: 0;
  width: 100%;
}
.container {
  display: flex;
  justify-content: center;
}
.content {
  margin-left: 10px;
}
</style>
